<template>
	<view class="page">
		<u-navbar title="编辑员工" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="body">
			<scroll-view scroll-y="true" style="height: 100%;">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item labelWidth='100rpx' label="角色:" prop="role_ids" borderBottom>
						<view @click="roleShow=true">
							<view v-if="!form.role_ids.length">
								请选择角色
							</view>
							<view class="tagBox">
								<u-tag v-for="item in roles" :key="item.id" :text="item.display_name" size="mini"
									closable @close="delTag(item.id)"></u-tag>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</scroll-view>
		</view>
		<view>
			<selectRole :show='roleShow' @close='roleShow=false' :role_ids='form.role_ids' @selectRole='selectRole' />
		</view>
		<view>
			<u-button @click='submit' :disabled="disabled">保存</u-button>
		</view>
	</view>
</template>

<script>
	import selectRole from './components/selectRole'
	import selectMumber from './components/selectMumber'
	export default {
		components: {
			selectRole,
			selectMumber
		},
		data() {
			return {
				form: {
					role_ids: [],
					name: null,
					mobile: null
				},
				rules: {
					'role_ids': {
						type: 'array',
						required: true,
						message: '请选择角色',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入名称',
						trigger: ['blur', 'change']
					},
					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				roles: [],
				roleShow: false,
				disabled: false,
				op: {

				}
			}
		},
		onLoad(op) {
			this.op = op
			this.$api_company.Administrator.Detail(op.id).then(res => {
				this.roles = res.data.roles
				this.form.role_ids = res.data.roles.map(item => item.id)
				this.form.name = res.data.nick_name
				this.form.mobile = res.data.mobile
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			selectRole(e) {
				this.roles.push(...e)
				this.form.role_ids.push( ...e.map(item => item.id))
			},
			delTag(id) {
				this.form.role_ids = this.form.role_ids.filter(item => item != id)
				this.roles = this.roles.filter(item => item.id != id)
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: '编辑中...'
					})
					this.disabled = true
					this.$api_company.Administrator.Update(this.op.id, this.form).then(res => {
						uni.reLaunch({
							url: '/administrator/index'
						})
						uni.hideLoading()
						this.disabled = false
					}).catch(err => {
						uni.hideLoading()
						uni.$u.toast(err.message)
						this.disabled = false
					})
				}).catch(errors => {
					uni.$u.toast('请输入完整信息')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.body {
		flex: 1;
		margin-top: 20rpx;
	}

	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		view:nth-child(2) {
			flex: 0.98;
		}
	}

	.tagBox {
		display: flex;

		>view {
			margin-right: 10rpx;
		}
	}
</style>